<template>
  <div>
    <el-card>
       <el-form :rules='ruleInline'  :model="formBase" >
    <el-form-item label="标签名称">
            <el-input  placeholder="请输入" v-model="formBase.tags"/>
          </el-form-item>
<!-- //aaaaaaaaaaaaaaaaaaaa、、 -->
      <el-form-item label="城市" ><!--  -->
          <el-select
            class="filter-item"
            style="width: 130px;"
            v-model="formBase.province"
            @keyup.enter="handleFilter"
            @change="handleProvince"
            filterable
          >
            <el-option v-for="item in citySelect.province" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          </el-form-item>

          <el-form-item label="地区">
          <el-select
            class="filter-item"
            style="width: 130px;"
            v-model="formBase.city"
            @keyup.enter="handleFilter"
            filterable
          >
            <el-option v-for="item in citySelect.cityDate" :key="item" :label="item" :value="item"></el-option>
          </el-select>

          </el-form-item>
<!-- //aaaaaaaaaaaaaaa// -->
    <el-form-item label="企业简称">
            <el-input  placeholder="请输入" v-model='formBase.shortName' />
          </el-form-item>

          <el-form-item label="状态" >
 <template slot-scope="{row}">
          <!-- v-model="formInline.region" -->

      <el-select v-model="formBase.state"  placeholder="请选择" @click='changestate(row)'>
      <el-option label="啓用" value="1" >启用 </el-option>
       <el-option label="禁用" value="0">禁用 </el-option>

    </el-select>
 </template>
  </el-form-item>

          <el-form-item>
            <el-button plain size="small" @click='clear'>清除</el-button>
            <el-button type="primary"  size="small" @click="search">搜索</el-button>
          </el-form-item>
          <el-form-item >
            <el-button icon="el-icon-edit" type="success" @click='add' size="small">新增企业用户</el-button>
          </el-form-item>

<!-- 消息提示 -->
          <el-alert
          style='margin:20px'
    :title="`数据一共${page.total}条`"
    type="info"
    :closable="false"
    show-icon>
  </el-alert>

<!-- 表格 -->
<el-table
    :data="tableData"
   >
    <el-table-column
      prop="id"
      label="序号"
      width="60">
    </el-table-column>
    <el-table-column
      prop="number"
      label="企业编号"
      width="200">
    </el-table-column>
    <el-table-column
      prop="company"
      label="企业简称">
    </el-table-column>
    <el-table-column
      prop="tags"
      label="标签">
    </el-table-column>
    <el-table-column
      prop="creatorID"
       width="50"
      label="创建者">
    </el-table-column>
     <el-table-column
      prop="addDate"
      label="创建日期">
    </el-table-column>
    <el-table-column
      prop="remarks"
      label="备注">
    </el-table-column>
    <el-table-column
      prop="state"
      label="状态">
      <template slot-scope="{row}">
        <span>{{row.state===1 ? '启用':'禁用'}}</span>
      </template>
    </el-table-column>
     <el-table-column
    width="250"
      prop="address"
      label="操作">
      <template slot-scope="{row}">
      <el-button type="primary" icon="el-icon-edit" circle></el-button>

      <el-button  v-if="row.state===1" @click="handleState(row)" type="success" icon="el-icon-check" circle></el-button>
      <el-button v-else type="danger" icon="el-icon-circle-close"  circle></el-button>

      <el-button type="warning"  icon="el-icon-delete" circle  @click='remove(row)'></el-button>

       </template>
    </el-table-column>
  </el-table>

</el-form>
<!-- 分页 -->
<el-pagination
  background
  layout="prev, pager, next,total"
  :page-size='page.pagesize'
  :current-page="page.page"
  @current-change = "changePage"
  :total="page.total">
</el-pagination>

    </el-card>
<!-- 彈層 -->
<el-dialog
  title="创建用户"
  :visible.sync="dialogVisible"
  >
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
 <!-- 企业名称 -->
  <el-form-item label="企业名称"  prop="shortName">
    <el-input v-model='ruleForm.shortName' ></el-input>
  </el-form-item>

  <!-- 所属公司 -->
  <el-form-item label="所属公司" prop="company">
    <el-input v-model='ruleForm.company' ></el-input>

  </el-form-item>
  <span class="span">https://www.tianyancha.com（在此可查询所属公司全称及简称）</span>
  <!-- 城市地区 -->
   <el-form-item label="城市地区" >
    <el-select placeholder="请选择" v-model="ruleForm.province" @change='handleProvince'>
      <el-option v-for='item in citySelect.province' :key='item' :label='item' :value='item'></el-option>
    </el-select>

     <el-select placeholder="请选择" v-model='ruleForm.city'>
      <el-option v-for='item in citySelect.cityDate' :key='item' :label='item' :value='item'></el-option>
    </el-select>
   </el-form-item>
<!-- 方向 -->
 <el-form-item label="方向(企业标签）" prop="tags">
    <el-input  v-model='ruleForm.tags'></el-input>
  </el-form-item>
  <!-- 备注 -->
  <el-form-item label="备注" prop="remarks" >
    <el-input type="textarea" v-model='ruleForm.remarks' :rows='6'></el-input>
  </el-form-item>

  </el-form>
  <el-row slot="footer" type='flex' justify="center">
    <el-col :span="6">
    <el-button @click='cancel' >取 消</el-button>
    <el-button @click="Btnok" type="primary" >确 定</el-button>
    </el-col>
  </el-row>
</el-dialog>

  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list, remove, add, disabled } from '@/api/hmmm/companys.js'
// console.log(provinces)
export default {
  name: 'companys',
  data () {
    return {
      dialogVisible: false,
      tableData: [],
      formBase: {
        name: '',
        province: '',
        city: '',
        tags: '',
        shortName: '',
        state: ''
      },
      page: {
        page: 1, // 当前的页码数
        pagesize: 10, // 每页多少条数据
        total: 0
      },
      citySelect: {
        province: [],
        cityDate: []
      },
      // 弹层
      ruleForm: {
        shortName: '',
        company: '',
        province: '', /*  */
        city: '',
        tags: '',
        remarks: '',
        isFamous: false

      },
      rules: {
        shortName: [
          { required: true, message: '企业简称不能为空', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '所属公司不能为空', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]

      },
      ruleInline: {
        shortName: [
          { required: true, message: '企业简称不能为空', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        tags: [{ required: true, message: '请输标签', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 点击修改状态
    // async changeState (data) {
    //   console.log(data)
    //   let state = data.state
    //   // console.log(data.state)

    //   await this.$confirm('确定修改状态？')
    //   state = state ? 0 : 1
    //   console.log(data.id)
    //   console.log(state)
    //   await disabled({ id: data.id, state })
    //   // console.log(data.state)
    //   this.getlist()
    // },

    async handleState (data) {
      console.log(data)
      console.log(data.id)
      console.log(data.state)
      try {
        await this.$confirm('确定修改状态吗')
        await disabled({
          id: data.id,
          state: data.state === 1 ? 0 : 1
        })
        this.getlist() // 渲染数据
      } catch (e) {
        console.log(e)
      }
    },

    // 渲染数据,得到数据
    async getlist () {
      // await list()
      // const { data } = await list(this.page)
      const { data } = await list(this.page)
      console.log(data)
      this.tableData = data.items
      console.log(this.tableData)
      this.page.total = data.counts
    },
    changePage (newPage) {
      this.page.page = newPage
      this.getlist()
    },
    getCityData () {
      this.citySelect.province = provinces()
      // console.log(this.citySelect.province)
    },
    // 选省获取到市
    handleProvince: function (e) {
      console.log(e, '1111111')
      this.citySelect.cityDate = citys(e)
      this.formBase.city = this.citySelect.cityDate[0]
    },
    // 删除
    async remove (id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示')
        await remove(id)
        this.getlist()
        this.$message({
          showClose: true,
          message: '成功删除了用户',
          type: 'success'
        })
      } catch (e) {
        console.log(e)
      }
    },
    // 搜索列表
    async search () {
      await this.getlist({
        tags: this.formBase.tags,
        shortName: this.formBase.shortName,
        city: this.formBase.city,
        name: this.formBase.name,
        provinces: this.formBase.province

      })
      this.getlist()
    },
    // 清除
    clear () {
      this.formBase = {
        tags: '',
        shortName: '',
        city: '',
        name: '',
        provinces: ''
      }
    },
    // 添加
    add () {
      this.ruleForm.province = this.formBase.province
      this.ruleForm.city -= this.formBase.city
      this.dialogVisible = true
    },
    // 弹层取消
    cancel () {
      this.dialogVisible = false
    },
    // 确定按钮
    async Btnok () {
      // await this.$refs.ruleForm.validate()
      const res = await add(this.A)
      console.log(res)
    }
    //
  },

  created () {
    this.getlist()
    this.getCityData()
  }

}
</script>

<style>
.el-card{
 margin:20px;
 padding: 0px;
}
.el-form{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* justify-content: space-between; */
}
.el-form-item{
  width: 280px;
  margin-right: 5px;
  display: flex;
}
.el-input .el-select{
  width: 180px;
}

  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /* 表格 */
  .el-table .el-table-column {
    background-color:green;
  }

</style>
